<template>
    <div class="app-container">
        <div class="filter-container">
            <el-input v-model="listQuery.orderNo" placeholder="订单编号" style="width: 200px;" class="filter-item"
                @keyup.enter.native="handleFilter" />
            <el-select v-model="listQuery.status" placeholder="订单状态" clearable style="width: 130px" class="filter-item">
                <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期" class="filter-item" value-format="yyyy-MM-dd" />
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
                搜索
            </el-button>
        </div>

        <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
            <el-table-column label="订单编号" prop="orderNo" align="center" width="180" />
            <el-table-column label="商品信息" align="center">
                <template slot-scope="scope">
                    <div v-for="(item, index) in scope.row.items" :key="index" class="order-item">
                        <el-image style="width: 50px; height: 50px" :src="item.image" :preview-src-list="[item.image]" />
                        <span class="item-name">{{ item.name }}</span>
                        <span class="item-price">¥{{ item.price }}</span>
                        <span class="item-quantity">x{{ item.quantity }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="订单金额" prop="totalAmount" align="center" width="120">
                <template slot-scope="scope">
                    ¥{{ scope.row.totalAmount }}
                </template>
            </el-table-column>
            <el-table-column label="订单状态" align="center" width="120">
                <template slot-scope="scope">
                    <el-tag :type="getStatusType(scope.row.status)">
                        {{ getStatusText(scope.row.status) }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="下单时间" prop="createTime" align="center" width="180" />
            <el-table-column label="操作" align="center" width="200">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.status === 1" type="primary" size="mini"
                        @click="handleUpdateStatus(scope.row, 2)">
                        发货
                    </el-button>
                    <el-button v-if="scope.row.status === 2" type="success" size="mini"
                        @click="handleUpdateStatus(scope.row, 3)">
                        确认收货
                    </el-button>
                    <el-button v-if="scope.row.status === 1" type="danger" size="mini"
                        @click="handleUpdateStatus(scope.row, 4)">
                        取消订单
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
            @pagination="getList" />
    </div>
</template>

<script>
import { getOrderList, updateOrderStatus } from '@/api/shop'
import Pagination from '@/components/Pagination'

export default {
    name: 'Order',
    components: { Pagination },
    data() {
        return {
            list: [],
            total: 0,
            listLoading: false,
            listQuery: {
                page: 1,
                limit: 10,
                orderNo: undefined,
                status: undefined,
                startDate: undefined,
                endDate: undefined
            },
            dateRange: [],
            statusOptions: [
                { label: '待付款', value: 0 },
                { label: '待发货', value: 1 },
                { label: '待收货', value: 2 },
                { label: '已完成', value: 3 },
                { label: '已取消', value: 4 }
            ]
        }
    },
    created() {
        this.getList()
    },
    methods: {
        async getList() {
            this.listLoading = true
            try {
                if (this.dateRange && this.dateRange.length === 2) {
                    this.listQuery.startDate = this.dateRange[0]
                    this.listQuery.endDate = this.dateRange[1]
                } else {
                    this.listQuery.startDate = undefined
                    this.listQuery.endDate = undefined
                }
                const { data } = await getOrderList(this.listQuery)
                this.list = data.items
                this.total = data.total
            } catch (error) {
                console.error('获取订单列表失败:', error)
            }
            this.listLoading = false
        },
        handleFilter() {
            this.listQuery.page = 1
            this.getList()
        },
        getStatusType(status) {
            const types = {
                0: 'warning', // 待付款
                1: 'primary', // 待发货
                2: 'info',    // 待收货
                3: 'success', // 已完成
                4: 'danger'   // 已取消
            }
            return types[status] || 'info'
        },
        getStatusText(status) {
            const texts = {
                0: '待付款',
                1: '待发货',
                2: '待收货',
                3: '已完成',
                4: '已取消'
            }
            return texts[status] || '未知状态'
        },
        async handleUpdateStatus(row, status) {
            try {
                const statusText = this.getStatusText(status)
                await this.$confirm(`确认将订单状态修改为"${statusText}"吗？`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                await updateOrderStatus({
                    orderId: row.id,
                    status: status
                })
                this.$message.success('状态更新成功')
                this.getList()
            } catch (error) {
                if (error !== 'cancel') {
                    console.error('更新订单状态失败:', error)
                    this.$message.error('操作失败')
                }
            }
        }
    }
}
</script>

<style scoped>
.filter-container {
    padding-bottom: 10px;
}

.order-item {
    display: flex;
    align-items: center;
    padding: 5px 0;
}

.order-item:not(:last-child) {
    border-bottom: 1px solid #ebeef5;
}

.item-name {
    margin-left: 10px;
    flex: 1;
}

.item-price {
    margin: 0 10px;
    color: #f56c6c;
}

.item-quantity {
    margin-right: 10px;
}
</style> 